<template>
  <div>
    <div class="card">
      <div class="totalNum">共{{ total }}条记录</div>
      <el-config-provider :locale="zhCn">
        <el-pagination
          background
          layout="prev, pager, next, ->, sizes"
          :total="Number(total)"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <!-- 自定义页数选择器文本 -->
          <template #sizes="{ pageSize }">
            <span>{{ pageSize }}/页</span>
          </template>
        </el-pagination>
      </el-config-provider>
    </div>
  </div>
</template>

<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ref, watch } from "vue";

const props = defineProps({
  total: {
    type: Number,
    default: 10,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits(["currentChange", "pageSizeChange"]);

// 当前页码
const currentPage = ref(props.pageNum);
// 每页显示的条数
const pageSize = ref(props.pageSize);

// const totalNum = ref(Number(props.total));

watch(
  () => props.pageNum,
  (newPageNum) => {
    currentPage.value = newPageNum;
  }
);
watch(
  () => props.pageSize,
  (newPageSize) => {
    pageSize.value = newPageSize;
  }
);
// watch(
//   () => props.total,
//   (newTotal) => {
//     totalNum.value = newTotal;
//   }
// );
// 处理页数改变
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  // console.log(`每页 ${newSize} 条`);
  emit("pageSizeChange", newSize);
};

// 处理当前页改变
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  // console.log(`当前页 ${newPage}`);
  emit("currentChange", newPage);
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: var(--primary-color);
}
.card {
  margin: 10px;
  // height: 68px;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .totalNum {
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #41464f;
    opacity: 0.85;
  }
}
::v-deep .number {
  color: #606266 !important;
}
</style>
